<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        function fuxiang(fn) {
            const time = Math.floor(Math.random() * 4001 + 1000);
            setTimeout(() => {
                console.log('---------------------');
                console.log('到了便利蜂');
                console.log('买到东西');
                // 按照朋友的指示进行 
                fn && fn(time);  // 左边为true 才会判断 右边 是否为true 
                console.log('回来了');
                console.log('耗时', time)
                console.log('---------------------');


            }, time)
        }


        // 夏 要带一瓶饮料 
        // 杜 带一个面包 必须买完饮料以后再买面包  
        // 朱 带一个水果  必须买完面包以后再买水果
        // 魏 带一瓶牛奶    必须买完水果以后再买牛奶

        fuxiang(res=>{
            console.log('饮料',res);
            fuxiang(res=>{
                console.log('面包',res);
                fuxiang(res=>{
                    console.log('水果',res);
                    fuxiang(res=>{
                        console.log('牛奶',res);
                    })
                })
            })
        });
        // 回调地狱造成的原因 
        // 回调函数嵌套过多 


        // 如何解决回调地狱?
        // es6出现了一个 Promise
        // 专门用来封装异步代码 
        // 不采用回调函数的方式了 
        // 于是避免了回调地狱  



        // function test(){

        // }

        // function haha(fn){
        //     console.log('动作1');
        //     console.log('动作2');
        //     if(收到信息){
        //         fn()
        //     }

        }
    </script>
</body>

</html>